<script setup>
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import img1 from '../../static/list/image1.png'
import {ref} from "vue";
import liuyunoTabs from "../../components/liuyuno-tabs/liuyuno-tabs.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import Tabbar from "../../components/tabbar.vue";
const index = ref(0)
const tabs = ['离校申请','留校申请','返校登记']
const tabChange = (value) => {
  index.value=value
}
</script>



<template>
  <view class="tp1m">
    <uni-search-bar class="uni-tp1s1" radius="10" placeholder="请输入姓名/学号关建词查询" clearButton="none" cancelButton="none" bg-color="#ffffff" @confirm="search"></uni-search-bar>
    <view class="tp1h1">
      <text style="font-size: 20px;">2024假期</text>
      <br>
      <text style="font-size: 10px">2024-12-12 00:00:00 至 2024-12-30 00:00:00</text>
      <br>
      <text style="font-size: 30px">10000人</text>
      <br>
      <image :src="img1" class="imgg1"></image>
    </view>
    <br>
    <view class="tp1h2">
      <liuyuno-tabs @tabClick="tabChange" :tabindex="index" :tab-data="tabs"></liuyuno-tabs>
    </view>
    <view v-if="index == 0" class="tp1sh">
      <view  class="tp1h3">
        <text>离校申请</text>
        <view class="pt1suibian">
          <view class="tp1ka1">
            <text>未申请</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>待审核</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>离校途中</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>已到目的地</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view class="tp1h4">
        <text>数据导出</text>
        <a href="">点击前往》</a>
      </view>
      <br>
      <view>
        <text>各班级离校情况</text>
      </view>
      <view class="tp1h5">
        <uni-icons type="left"></uni-icons>
        <text color="#e9f1fc">2024-10-1</text>
        <uni-icons type="right"></uni-icons>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未申请</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">待审核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">离校途中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已到目的地</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未申请</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">待审核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">离校途中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已到目的地</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未申请</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">待审核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">离校途中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已到目的地</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="index == 1" class="tp1sh">
      <view  class="tp1h3">
        <text>留校申请</text>
        <view class="pt1suibian">
          <view class="tp1ka1">
            <text>待审核</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>未开始</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>进行中</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>已结束</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view class="tp1h4">
        <text>数据导出</text>
        <a href="">点击前往》</a>
      </view>
      <br>
      <view>
        <text>各班级离校情况</text>
      </view>
      <view class="tp1h5">
        <uni-icons type="left"></uni-icons>
        <text color="#e9f1fc">2024-10-1</text>
        <uni-icons type="right"></uni-icons>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">待审核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未开始</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">进行中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已结束</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">待审核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未开始</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">进行中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已结束</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">待审核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未开始</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">进行中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已结束</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="index == 2" class="tp1sh">
      <view  class="tp1h3">
        <text>返校登记</text>
        <view class="pt1suibian">
          <view class="tp1ka1">
            <text>未登记</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>已登记</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>返校途中</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
          <view class="tp1ka1">
            <text>已到校</text>
            <text style="font-weight: bold;font-size: 35px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view class="tp1h4">
        <text>数据导出</text>
        <a href="">点击前往》</a>
      </view>
      <br>
      <view>
        <text>各班级离校情况</text>
      </view>
      <view class="tp1h5">
        <uni-icons type="left"></uni-icons>
        <text color="#e9f1fc">2024-10-1</text>
        <uni-icons type="right"></uni-icons>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未登记</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已登记</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">返校途中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已到校</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未登记</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已登记核</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">返校途中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已到校</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
      <br>
      <view  class="tp1h3">
        <text>班级名称</text>
        <view class="pt1suibian">
          <view class="tp1ka2">
            <text style="font-size: 10px">学生总数</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">未登记</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已登记</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">返校途中</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
          <view class="tp1ka2">
            <text style="font-size: 10px">已到校</text>
            <text style="font-weight: bold;font-size: 10px">0</text>
          </view>
        </view>
      </view>
    </view>
    <view class="tabh"><Tabbar :cur-index="0"/></view>
  </view>
</template>



<style lang="scss">
.tp1m{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(240, 248, 250, 1);
  width: 375px;
  height: 1000px;
}
.uni-tp1s1{
  width: 90%;
  height: 40px;
}
.tp1h1{
  background-color: rgba(233, 241, 252, 1);
  width: 90%;
  height: 100px;
  border-radius: 10px;
  position: static;
}
.imgg1{
  width: 77px;
  height: 77px;
  position: absolute;
  left: 250px;
  top: 80px;
}
.tp1h2{
  display: flex;
}
.tp1sh{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tp1h3{
  background-color: rgba(233, 241, 252, 1);
  width: 90%;
  height: 100px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pt1suibian{
  display: flex;
}
.tp1ka1{
  border: 1px solid #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  width: 85px;
  height: 70px;
}
.tp1h4{
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 30px;
  background-color: rgba(233, 241, 252, 1);
}
.tp1h5{
  display: flex;
  justify-content: space-between;
  width: 90%;
}
.tp1ka2{
  border: 1px solid #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  width: 70px;
  height: 70px;
}
.tabh{
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>